<template>
    <P>count : {{ count }}</P>

    <P>reactive=====</P>
    <p>obj:{{ obj }}</p>
    <p>obj.name: {{ obj.name }}</p>
    <p>obj:{{ obj }}</p>
    <p>arr: {{ arr }}</p>
    <p>arr[1] : {{ arr[1] }}</p>

    <p>computed</p>
    <p>countAddFive: {{ countAddFive }}</p>
    <p>objAgeAddFive: {{ objAgeAddFive }}</p>

 

</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
const count = ref(1)

console.log(count);
console.log(count.value);

const obj = reactive({
    name: 'tom',
    age: 16
})

const arr = reactive([1,2,3])

const countAddFive = computed(()=>{
    return count.value + 5
})

const objAgeAddFive = computed(()=>{
    return obj.age + 5
})



watch(count, (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
})
</script>